import React from 'react';
// 引入样式文件
import '@/assets/css/cinema.css';
// 引入 hook useEffect
import { useEffect } from 'react';
// 引入定义好的影院接口
import { getCinemaLocFn } from '@/api/cinema'
const Index = () => {
    useEffect(() => {
        // 发起数据请求
        getCinemaLocFn().then(res => {
            console.log('影院坐标', res);
            if (res.data.errNo == 0) {
                // console.log(res.data.paginate);
                const showLocArr = res.data.paginate.slice(0, 15)
                console.log(showLocArr);
                // 注意: 在react 脚手架中,全局对象必须前面加window
                // 01: 创建地图实例
                var map = new window.BMapGL.Map("container");
                // 02: 创建一个地图的中心坐标点:
                var point = new window.BMapGL.Point(116.404, 39.915);
                // 03: 地图初始化，同时设置地图展示级别
                map.centerAndZoom(point, 15);
                // 04: 开始鼠标滚轮的缩放
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                // 05: 设置地图的倾斜角度
                map.setHeading(64.5);   //设置地图旋转角度
                map.setTilt(73);       //设置地图的倾斜角度
                showLocArr.map(({ gpsaddress }) => {
                    // 06: 设置地图的点坐标
                    var point = new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]);
                    // 07: 根据点坐标给地图设置marker 标记
                    var marker = new window.BMapGL.Marker(point);
                    //  创建标注
                    map.addOverlay(marker);
                    // 08: 创建信息窗口
                    var opts = {
                        width: 100,
                        height: 50,
                        title: '当前位置:'
                    };
                    // 创建地理编码实例      
                    var myGeo = new window.BMapGL.Geocoder();
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]), function (result) {
                        if (result) {
                            // alert(result.address);
                            //09: 创建信息窗口对象(每一个坐标点marker 都对应一个地址描述,这样需要用到逆地址解析)
                            var infoWindow = new window.BMapGL.InfoWindow(result.address, opts);
                            //10.点标记添加点击事件
                            marker.addEventListener('click', function () {
                                map.openInfoWindow(infoWindow, point); // 开启信息窗口
                            });
                        }
                    });
                })
            }
        })
    }, [])

    return (
        <div id='container'>
        </div>
    );
}


export default Index;
